<template>
    <div class="box-movieinfo">
        <h1>{{movieTile}}</h1>
        <span>上映年份：{{movieInfo.year}}年 / 制片国家/地区：{{addr[0]}}</span>
        <img :src="movieImg" alt="">
        <p>简介：{{movieInfo.summary}}</p>

        <!--评论列表-->
        <comment-text></comment-text>    
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
//导入评论子组件
import comment from '../subcomments/comment.vue'
export default {
    data() {
        return {
            movieInfo: {},
            movieId: this.$route.params.id,
            movieTile: null,
            movieImg: "",
            addr: []
        }
    },
    created() {
        this.getNewMovie()
    },
    methods: {
        getNewMovie() {
            this.$http.jsonp(`v2/movie/subject/${this.movieId}`)
                .then(res => {
                    Toast('电影数据加载成功！')
                    console.log(res.body)
                    // if(res.body)
                    this.movieInfo = res.body//挂载数据
                    this.movieTile = res.body.title
                    this.movieImg = res.body.images.large
                    this.addr = res.body.countries
                }).catch(err => {
                    Toast('电影数据加载失败！')
                    console.log(err)
                })
        }
    },
    components:{
        "comment-text":comment
    }
}
</script>

<style lang="scss" scoped>
.box-movieinfo {
    text-align: center;
    >h1 {
        font-size: 20px; // text-align: center;
    }
    >span {
        color: #8f8686;
        font-size: 12px;
    }
    >p {
        text-indent: 2em;
        text-align: left;
        padding: 10px;
    }
}
</style>
